/*
 * Copyright(C) 2019 FUYUN DATA SERVICES CO.,LTD. - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * 该源代码版权归属福韵数据服务有限公司所有
 * 未经授权，任何人不得复制、泄露、转载、使用，否则将视为侵权
 *
 */

import * as React from "react";
import { connect } from "react-redux";
import { IRootState, Dispatch } from "../../../../store";
import { Form, Table, Input, Button, Popconfirm } from "antd";

import { FormComponentProps } from "antd/lib/form";
import TitleCard from "src/components/TitleCard";

const mapStateToProps = ({ searchLog, loading }: IRootState) => ({
  searchLog,
  loading: loading.effects.searchLog.getUserList as any
});
const mapDispatchToProps = ({ searchLog }: Dispatch) => ({
  getSearchLogList: (payload: any) => searchLog.getSearchLogList(payload),
  deleteById: (id: string) => searchLog.deleteById(id)
});

type connectedProps = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>;

interface IState {
  visible: boolean;
  searchName: string;
  searchBatch: string;
}

interface IProps extends connectedProps {
  loading: boolean;
}

class SearchLogHandle extends React.Component<
  IProps & FormComponentProps,
  IState
> {
  public state = {
    visible: false,
    searchName: "",
    searchBatch: ""
  };

  public componentDidMount = () => {
    const { getSearchLogList } = this.props;
    getSearchLogList({
      page: 0,
      goodsName: "",
      goodsBatch: ""
    });
  };

  public handleSearch = () => {
    const { getSearchLogList } = this.props;
    getSearchLogList({
      page: 0,
      goodsName: this.state.searchName,
      goodsBatch: this.state.searchBatch
    });
  };

  public inputNameChange = (e: any) => {
    this.setState({
      searchName: e.target.value
    });
  };

  public inputBatckChange = (e: any) => {
    this.setState({
      searchBatch: e.target.value
    });
  };

  public deleteHandle = (id: string) => {
    const { deleteById } = this.props;
    deleteById(id);
  };

  public tableRender() {
    const { searchLogList } = this.props.searchLog;
    const column = [
      {
        title: "序号",
        dataIndex: "seq",
        render: (text: any, record: any, index: any) => {
          return index + 1;
        }
      },
      {
        title: "商品名称",
        dataIndex: "goodsName"
      },
      {
        title: "商品批次号",
        dataIndex: "goodsBatch"
      },
      {
        title: "防伪码",
        dataIndex: "securityCodeNumber"
      },
      {
        title: "查询次数",
        dataIndex: "queryNumber"
      },
      {
        title: "查询地区",
        dataIndex: "queryArea",
        render: (text: any, record: any, index: any) => {
          if (record.areaInfoList !== null && record.areaInfoList.length > 0) {
            return record.areaInfoList[0].city;
          }
        }
      },
      {
        title: "操作",
        dataIndex: "handle",
        render: (text: any, record: any, index: any) => {
          return (
            <Popconfirm
              title="确定要删除查询防伪码吗？"
              onConfirm={() => this.deleteHandle(record.id)}
              okText="确定"
              cancelText="取消"
            >
              <Button type="danger" size="small">
                删除
              </Button>
            </Popconfirm>
          );
        }
      }
    ];

    return <Table dataSource={searchLogList} columns={column} rowKey={"id"} />;
  }

  public render() {
    return (
      <div className="message-container" style={{ paddingTop: 32 }}>
        <div style={{ marginLeft: "20px" }}>
          <b>商品名称:</b>
          <Input
            style={{ width: "200px", marginLeft: "10px" }}
            onChange={(e: any) => this.inputNameChange(e)}
          />
          <b style={{ marginLeft: "10px" }}>批次号:</b>
          <Input
            style={{ width: "200px", marginLeft: "10px" }}
            onChange={(e: any) => this.inputBatckChange(e)}
          />
          <Button
            type="primary"
            onClick={this.handleSearch}
            style={{ marginLeft: "10px" }}
          >
            查询
          </Button>
        </div>
        <TitleCard style={{ paddingTop: 32 }}>{this.tableRender()}</TitleCard>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create<IProps & FormComponentProps>({})(SearchLogHandle));
